<template>
  <view class="msg">
    <tui-section title="检验批信息" is-line background="#f8f8f8"></tui-section>
    <view class="list">
      <view class='lis'>
        <view class='title'>检查编号</view><text class="row">{{msgList[0]?.qualityCode}}</text>
      </view>
      <view class='lis'>
        <view class='title'>检查分类</view><text class="row">{{msgList[0]?.qualityType}}</text>
      </view>
      <view class='lis'>
        <view class='title'>检查部位</view><text class="row">{{msgList[0]?.qualityPart}}</text>
      </view>
      <view class='lis'>
        <view class='title'>检查单位</view><text class="row">{{msgList[0]?.qualityUnitsId}}</text>
      </view>
      <view class='lis'>
        <view class='title'>检查人员</view><text class="row">{{msgList[0]?.qualityMemberId}}</text>
      </view>
      <view class='lis'>
        <view class='title'>检查情况</view><text class="row">{{msgList[0]?.qualityDescription}}</text>
      </view>
      <view class='lis'>
        <view class='title'>检查时间</view><text class="row">{{msgList[0]?.qualityTime}}</text>
      </view>
      <view class='lis'>
        <view class='title'>相关附件</view>
        <view style="display: flex;flex-direction: column;width: 70%;">
          <view v-for='(item,index) in msgList[0]?.qualityFileList' @click='createDownload(item.filePath)' style="color: #0091ff;">
             {{item.fileTitle}}
          </view>
        </view>
      </view>
      <view :class="['state', getStateClass(msgList[0]?.isPass)]">{{msgList[0]?.isPass}}</view>
    </view>
    

    <!-- 审批不通过编辑删除 -->
    <view  v-if='msgList[0]?.isPass==="合格" && approvalRole' class="btn">
      <tui-button style="margin-right: 5px;" @click='reEdit(qualityId)'>重新编辑</tui-button>
      <tui-button style="margin-left: 5px;" @click='deleteQualityChekck(qualityId)'>删除</tui-button>
    </view>
   <view class="btn2" v-else-if='msgList[0]?.isPass==="不合格" && submitState!=="1" && approvalRole'>
      <tui-button style="margin-right: 5px;" type="primary" @click='reEdit(qualityId)'>重新编辑</tui-button>
      <tui-button style="margin-right: 5px;margin-left: 5px;" type="primary" @click='deleteQualityChekck(qualityId)'>删除</tui-button>
      <tui-button v-if='approvalRole' style="margin-left: 5px;" type="primary" @click='rectification(qualityId)'>整改</tui-button>
    </view>

  </view>
</template>

<script setup lang='ts'>
  import {
    reactive,
    ref
  } from 'vue';
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {selectQualityById,deleteQuality} from '@/apis/quality.js'

  let msgList = reactive([])
  const qualityId = ref(0)
  const approvalRole = ref(false)
  const submitState = ref(0)

  onLoad(({
    id,
    isSubmit,
    approval
  }) => {
    qualityId.value = id
    submitState.value = isSubmit
    approvalRole.value = approval
    console.log(id,isSubmit,approval);
    selectQualityById(id).then(res => {
      msgList.push(res.data.data);
    })
  })

  //删除质量检查
  const deleteQualityChekck = (id) => {
    deleteQuality(id).then(res=>{
      if(res.data.code===200){
        uni.navigateBack()
      }
    })
  }
  
  const dtask = ref(null);
  
  // 创建下载任务
  const createDownload = (url) => {
    dtask.value = plus.downloader.createDownload("http://" + url, {}, function(d, status) {
      // 下载完成
      if (status == 200) {
        console.log("Download success: " + d.filename);
        plus.runtime.openFile(d.filename);
      } else {
        console.log("Download failed: " + status);
      }
    });
  
    dtask.value.start();
  }

  //重新编辑质量检查信息
  const reEdit=(id)=>{
  	uni.navigateTo({
  		url:`/pages/qualityCheck/newQualityCheck?qualityId=${qualityId.value}`
  	})
  }
  
  //不合格整改
  const rectification=()=>{
  	uni.navigateTo({
  		url:`/pages/qualityRectification/newQualityRectification?qualityId=${qualityId.value}`
  	})
  }
  
  //动态绑定样式
  const getStateClass = (state) => {
  	switch (state) {
  		case '不合格':
  			return 'state-fail';
  		case '合格':
  			return 'state-pass';
  	}
  };
</script>

<style scoped lang="scss">
  .msg {
    background-color: #fff;
    .list{
      position: relative;
      .lis {
        display: flex;
        margin: 10rpx 60rpx;
        line-height: 50rpx;
        color: #7f7f7f;
      
        .title {
          width: 30%;
        }
      
        .row {
          width: 70%;
          word-wrap: break-word;
        }
      }
      .state{
      	position: absolute;
      	padding: 0 20rpx;
      	text-align: center;
      	line-height: 30px;
      	border: 1px solid #ff6937;
      	right: 10px;
      	top: 0px;
      	color: #ff6937;
      	&.state-fail {
      		color: #ff4d4f;
      		border-color: #ff4d4f;
      	}
      	
      	&.state-pass {
      		color: #3086ff;
      		border-color: #3086ff;
      	}
      }
    }
    
    

    .thorui-align__center {
      display: flex;
      align-items: center;
    }

    .tui-text {
      font-size: 30rpx;
      padding-left: 12rpx;
    }

    .btn {
      display: flex;
      justify-content: space-between;
      margin: 0 20rpx;
      padding-bottom: 20rpx;
    }
    .btn2 {
      display: flex;
      justify-content: space-between;
      margin: 0 20rpx;
      padding-bottom: 20rpx;
    }
  }
</style>